<template>
  <Card dis-hover :bordered="false">
    <Row type="flex" justify="space-between">
      <Col>
        <jg-Search
          :searchData="searchData"
          @on-enter-input="askDatakeyword"
          @on-clear-input="askDatakeyword"
          @on-change-change="askDatanow"
          @on-change-date="askDataing"
          @on-open-change-change="askDataopen"
        />
      </Col>
      <Col
        v-hasC="{
          name: 'v1-patient-market-patient-import',
          flag: 'v1/patient/market/patient-import',
        }"
      >
        <Upload
          :action="importbutton.action"
          :show-upload-list="importbutton.showUploadList"
          :headers="importbutton.headers"
          :accept="importbutton.accept"
          :format="importbutton.format"
          :on-success="successimport"
          :on-progress="progressimport"
          :disabled="loadingbut"
        >
          <Button type="primary" :loading="loadingbut" :disabled="loadingbut">{{
            loadingbut ? "导入中" : "导入"
          }}</Button>
        </Upload>
      </Col>
    </Row>
    <div class="i-table-no-border">
      <Table
        highlight-row
        ref="table"
        :columns="columns"
        :loading="loading"
        :data="data"
        size="small"
        @on-sort-change="sortchange"
      >
        <template slot-scope="{ row }" slot="info">
          <a @click="handleDetailPatient(row)"
            >{{ row.name }} {{ row.gender_str }} {{ row.age }}岁</a
          >
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a
            v-hasC="{
              name: 'v1-patient-index-edit-info',
              flag: 'v1/patient/index/edit-info',
            }"
            @click="handleOpenDrawer(row)"
            >编辑</a
          >
        </template>
        <template slot-scope="{ row }" slot="state">
          <Tag v-if="row.status_name === '无效'" color="red">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '跟进中'" color="volcano">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '预约'" color="cyan">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '到诊'" color="green">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '老患者到诊'" color="magenta">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '有意向'" color="blue">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name === '未开口'" color="purple">{{
            row.status_name
          }}</Tag>
          <Tag v-else-if="row.status_name" color="orange">{{
            row.status_name
          }}</Tag>
        </template>
        <template slot-scope="{ row }" slot="label">
          <Poptip word-wrap trigger="hover" placement="right" width="400">
            <template v-for="(item, index) in row.patient_tags_name_arr">
              <Tag
                v-show="index < 3"
                :color="item.type == 1 ? 'warning' : 'primary'"
                :key="index"
                >{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag
              >
              <!-- <Tag v-show="index<3" :color="item.type==1?'warning':'primary'" :key="index">{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag> -->
            </template>
            <div slot="content">
              <template v-for="(item, index) in row.patient_tags_name_arr">
                <Tag
                  :color="item.type == 1 ? 'warning' : 'primary'"
                  :key="index"
                  >{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag
                >
                <!-- <Tag :color="item.type==1?'warning':'primary'" :key="index">{{ item.tags_name.replace(/[\r\n]/g, "") }}</Tag> -->
              </template>
            </div>
          </Poptip>
        </template>
        <template slot-scope="{ row }" slot="disease">
          <span>{{ row.patient_diseases_name }}</span>
        </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page
          show-total
          show-elevator
          show-sizer
          :total="total"
          :current.sync="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          @on-change="changepage"
          @on-page-size-change="changepageSize"
        />
      </div>
    </div>
    <patient-detail
      ref="patientDetail"
      :btnShow="btnShow"
      @cancelDrawer="askData"
      @askData="askData"
    />
    <edit-patient ref="editPatient" @patientfun="askData" v-if="!loading" />
  </Card>
</template>

<script>
import jgSearch from "@/components/search";
import mixins from "@/mixins/mixins";
import patientDetail from "@/components/patientDetail";
import editPatient from "@/components/editPatient";
import util from "@/libs/util";
import { mapState, mapMutations } from "vuex";
import { patientmarketpatientlist } from "@/api/hqapi/indexone.js";
export default {
  /*  import引入的组件注入到components对象中使用  */
  components: { patientDetail, editPatient, jgSearch },
  name: "marketreferral",
  mixins: [mixins],
  computed: {
    ...mapState("power/important", ["loadingbut", "message"]),
  },
  data() {
    return {
      btnShow: [
        {
          name: "v1-patient-index-sub",
          flag: "v1/patient/index/sub",
        },
        {
          name: "v1-patient-index-edit-remark",
          flag: "v1/patient/index/edit-remark",
        },
        {
          name: "v1-patient-index-update3",
          flag: "v1/patient/index/update",
        },
        {
          name: "v1-patient-callback-callback-common-list",
          flag: "v1/patient/callback/callback-common-list",
        },
        {
          name: "v1-patient-index-edit-tags",
          flag: "v1/patient/index/edit-tags",
        },
        {
          name: "v1-patient-index-edit-tags2",
          flag: "v1/patient/index/edit-tags",
        },
      ],
      searchData: {
        project: [
          {
            id: 1,
            key: "DatePicker",
            style: { width: "200px" },
            value: ["", ""],
            type: "daterange",
            callback: "date",
            placeholder: "请选择创建日期",
          },
          {
            id: 2,
            key: "Input",
            style: { width: "260px" },
            value: "",
            placeholder: "请输入姓名/手机号/微信号",
            clearable: true,
            callback: "input",
          },
          {
            id: 3,
            key: "Select",
            style: { width: "118px" },
            value: "",
            field: { value: "value", label: "label" },
            childList: [],
            clearable: true,
            callback: "change",
            placeholder: "患者状态",
          },
          {
            id: 4,
            key: "Select",
            style: { width: "118px" },
            value: "",
            field: { value: "value", label: "label" },
            childList: [],
            clearable: true,
            Group: true,
            callback: "change",
            placeholder: "报备人",
          },
          {
            id: 5,
            key: "TreeSelect",
            style: { width: "118px" },
            value: "",
            field: { value: "value", label: "label" },
            childList: [],
            clearable: "clearable",
            callback: "change",
            placeholder: "病种",
          },
          // {
          //   id: 6,
          //   key: "Select",
          //   style: { width: "118px" },
          //   value: "",
          //   field: { value: "value", label: "label" },
          //   childList: [],
          //   clearable: "clearable",
          //   type: "daterange",
          //   callback: "change",
          //   placeholder: "地区",
          // },
          // {
          //   id: 7,
          //   key: "Select",
          //   style: { width: "118px" },
          //   value: "",
          //   field: { value: "value", label: "label" },
          //   childList: [],
          //   clearable: "clearable",
          //   type: "daterange",
          //   callback: "change",
          //   placeholder: "医院",
          // },
          // {
          //   id: 8,
          //   key: "Select",
          //   style: { width: "118px" },
          //   value: "",
          //   field: { value: "value", label: "label" },
          //   childList: [],
          //   clearable: "clearable",
          //   type: "daterange",
          //   callback: "change",
          //   placeholder: "医生",
          // },
          {
            id: 6,
            key: "TreeSelect",
            style: { width: "118px" },
            value: "",
            childList: [],
            clearable: true,
            callback: "change",
            placeholder: "医生",
          },
        ],
      },
      importbutton: {
        action: "",
        showUploadList: false,
        accept: ".xls,.xlsx",
        format: ["xlsx"],
        headers: {
          Authorization: `Bearer ${util.cookies.get("token")}`,
          ProjectId: localStorage.getItem("currentProject"),
        },
      },
      data: [],
      keywordbool: false,
      params: {
        page: 1,
        pageSize: 10,
        start_time: "",
        end_time: "",
        keywords: "",
        patient_status_id: "",
        reported_id: "",
        diseases_id: "",
        market_channel_id: "",
        sort_appointment_time: 0,
        sort_callback_count_type: 0,
      },
      columns: [
        {
          title: "基本信息",
          key: "basic",
          slot: "info",
          width: 160,
          fixed: "left",
        },
        { title: "患者状态", key: "state", slot: "state", width: 100 },
        { title: "报备人", key: "reported_name", width: 120 },
        {
          title: "预到时间",
          key: "appointment_time",
          sortable: "custom",
          width: 120,
        },
        {
          title: "回访次数",
          key: "callback_count",
          sortable: "custom",
          width: 120,
        },
        { title: "患者标签", key: "label", slot: "label", width: 268 },
        {
          title: "市场来源渠道",
          key: "market_name",
          width: 190,
          ellipsis: true,
          tooltip: true,
        },
        { title: "病种", slot: "disease", width: 200 },
        { title: "创建时间", key: "created_at", width: 135 },
        {
          title: "备注",
          minWidth: 150,
          key: "remark",
          ellipsis: true,
          tooltip: true,
        },
        { title: "操作", width: 90, slot: "action", fixed: "right" },
      ], // 列表表头
    };
  },
  /* 函数方法集合 */
  methods: {
    ...mapMutations("power/important", ["changeloadingbut", "changemessage"]),
    /* @函数功能: 初始化 */
    initial() {
      this.storage.set("market", ["", ""]);
      this.importbutton.action = `${this.$Setting.apiBaseURL}/v1/patient/market/patient-import`;
      this.funaskData = patientmarketpatientlist;
      this.askData();
    },
    /* @函数功能: 请求数据 */
    askDatas(res) {
      this.data = res.list.list;
      this.total = res.list.total;
      this.searchData.project.forEach((item) => {
        if (item.id === 3) {
          if (item.childList.length === 0) {
            item.childList = res.patient_status;
          }
        } else if (item.id === 4) {
          if (item.childList.length === 0) {
            item.childList = res.member_list;
          }
        } else if (item.id === 5) {
          if (item.childList.length === 0) {
            item.childList = res.diseases_list;
          }
        } else if (item.id === 6) {
          if (item.childList.length === 0) {
            item.childList = res.source_channel_list;
          }
        }
      });
    },
    askDatakeyword() {
      this.keywordbool = true;
      (this.params = {
        page: 1,
        pageSize: 10,
        start_time: "",
        end_time: "",
        keywords: "",
        patient_status_id: "",
        reported_id: "",
        diseases_id: "",
        market_channel_id: "",
        sort_appointment_time: 0,
        sort_callback_count_type: 0,
      }),
        this.searchData.project.forEach((item) => {
          if (item.id === 2) {
            this.params.keywords = item.value;
          } else if (item.id === 1) {
            let keywording = "";
            this.searchData.project.forEach((items) => {
              if (items.id === 2) {
                keywording = items.value;
              }
            });
            if (keywording !== "") {
              if (JSON.stringify(item.value) !== JSON.stringify(["", ""])) {
                let timer = [
                  this.$Date(item.value[0]).format("YYYY-MM-DD"),
                  this.$Date(item.value[1]).format("YYYY-MM-DD"),
                ];
                this.storage.set("market", timer);
                item.value = ["", ""];
                this.params.start_time = "";
                this.params.end_time = "";
              }
            } else {
              if (
                JSON.stringify(this.storage.get("market")) !==
                JSON.stringify(["", ""])
              ) {
                item.value = this.storage.get("market");
                this.params.start_time = item.value[0];
                this.params.end_time = item.value[1];
              }
            }
          } else {
            item.value = "";
          }
        });
      this.askData();
    },
    askDatanow() {
      // if (!this.keywordbool) {
      this.params.page = 1;
      this.searchData.project.forEach((item) => {
        if (item.id === 3) {
          this.params.patient_status_id = item.value;
        } else if (item.id === 4) {
          this.params.reported_id = item.value;
        } else if (item.id === 5) {
          this.params.diseases_id = item.value;
        } else if (item.id === 6) {
          this.params.market_channel_id = item.value;
        }
      });
      this.askData();
      // }
    },
    askDataing() {
      this.searchData.project.forEach((item) => {
        if (item.id === 1) {
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
          let timer = ["", ""];
          if (JSON.stringify(item.value) !== JSON.stringify(["", ""])) {
            timer = [
              this.$Date(item.value[0]).format("YYYY-MM-DD"),
              this.$Date(item.value[1]).format("YYYY-MM-DD"),
            ];
          }
          this.storage.set("market", timer);
        }
      });
      this.askDatanow();
    },
    askDataopen() {
      this.keywordbool = false;
    },
    sortchange(e) {
      if (e.key === "appointment_time") {
        if (e.order === "desc") {
          this.params.sort_appointment_time = 2;
        } else if (e.order === "asc") {
          this.params.sort_appointment_time = 1;
        } else {
          this.params.sort_appointment_time = 0;
        }
        this.params.sort_callback_count_type = 0;
      } else if (e.key === "callback_count") {
        if (e.order === "desc") {
          this.params.sort_callback_count_type = 2;
        } else if (e.order === "asc") {
          this.params.sort_callback_count_type = 1;
        } else {
          this.params.sort_callback_count_type = 0;
        }
        this.params.sort_appointment_time = 0;
      }
      this.askData();
    },

    handleDetailPatient(row) {
      this.$refs.patientDetail.handleOpen(row);
    },
    handleOpenDrawer(row) {
      if (row === -1) this.$refs.editPatient.handleOpenDrawer();
      else this.$refs.editPatient.handleEdit(row);
    },
    progressimport() {
      this.changeloadingbut(true);
    },
    successimport(e) {
      if (e.code === 200) {
        this.changeloadingbut(false);
        this.changemessage("上传成功");
      } else {
        this.changeloadingbut(false);
        this.changemessage(e.message);
      }
    },
  },
  watch: {
    loadingbut(nval, val) {
      if (!nval && this.message !== "") {
        this.$Message.info(this.message);
        if (this.message === "上传成功") {
          this.askData();
        }
        this.changemessage("");
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
